<!-- 应用使用记录 -->
<template>
    <s-card class="record-card">
        <template v-slot:title>最近使用</template>
        <template v-slot:content>
            <ul class="record-list">
                <li
                    v-for="item in recordList"
                    :key="item.id"
                    @click="toApp(item)"
                >
                    <p :title="item.name">{{ item.name }}</p>
                    <span>
                        <!-- {{ formatDate(item.modifiedStime, 'yyyy-MM-dd') }} -->
                        {{ item.updateTime }}
                    </span>
                </li>
            </ul>
        </template>
    </s-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { AppRecordVO } from '@/api/app/types.ts'
import SCard from '@/components/SCard/index.vue'

const recordList = ref<AppRecordVO[]>([
    {
        id: '1',
        name: 'WJ业务辅助系统',
        updateTime: '2024-10-29',
    },
    {
        id: '1',
        name: 'WJ业务辅助系统',
        updateTime: '2024-10-29',
    },
    {
        id: '1',
        name: 'WJ业务辅助系统',
        updateTime: '2024-10-29',
    },
    {
        id: '1',
        name: 'WJ业务辅助系统',
        updateTime: '2024-10-29',
    },
    {
        id: '1',
        name: 'WJ业务辅助系统',
        updateTime: '2024-10-29',
    },
])

/**
 * 访问应用
 * @param item
 */
const toApp = (item: AppRecordVO) => {
    console.log(item)
}
</script>

<style scoped lang="scss">
.record-card {
    background: url(../../../assets/images/home/record_1.png) no-repeat
        var(--background-color-white);
    background-size: 100% auto;
    background-position: top center;
    .record-list {
        padding: 10px 16px 0;
        li {
            display: flex;
            justify-content: space-between;
            line-height: 34px;
            cursor: pointer;
            font-size: 13px;
            p {
                max-width: 70%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            span {
                color: var(--text-color--gray);
                font-size: 12px;
            }
        }
        li:hover {
            color: var(--color-primary);
        }
    }
}
</style>
